<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
    <script src="/node_modules/jquery/dist/jquery.min.js"></script>
    <script src="/node_modules/art-template/lib/template-web.js"></script>
    <!-- <script src="/node_modules/axios/lib/axios.js"></script> -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>英雄联盟</title>
</head>
<style>
    body {
        background: url('/assets/images/timg.jpg');
        color: #fff;
        background-size: cover;
    }
  
</style>
<body>
    <div class="container">
        <h1 class="text-center">英雄联盟<small>英雄信息</small></h1>
        <!-- 表格部分 -->
        <a href="index.html" class="btn btn-info btn-sm">返回首页</a>
        <hr>
        <div class="info">
        </div>
    </div>
    <!-- 需要动态渲染的数据 -->
    <script id="tmp" type="text/html">
        <p>姓名：{{ name }}</p>
        <p>性别：{{ gender }} </p>
        <p>创建时间： {{ ctime }} </p>
    </script>
    <script>
        $(function () {
            // console.log('ok')
            // 发送ajax 请求 
            //  $.ajax({
            //      url:'http://127.0.0.1:5000/api/getheros',
            //      type:'get',
            //      success:(res) =>{
            //          // console.log(res)
            //        const htmlStr = template('tmp',res)
            //        $("tbody").html(htmlStr)
            //      },
            //      error: (err) =>{
            //          console.log(err)
            //      }
            //  })
            //  使用axios 方式发送请求 
            const search = new URLSearchParams(location.search)
            let id = search.get('id')
            // console.log(search.get('id'))
            // 发送axios请求 
            axios.get('http://127.0.0.1:5000/api/gethero?id=' + id)
                .then(function (res) {
                    console.log(res.data)
                    const htmlStr = template('tmp', res.data.message)
                    console.log(htmlStr)
                    $(".info").html(htmlStr)

                })
                .catch(function (err) {
                    console.log(err)
                })

        })
    </script>
</body>

</html>